<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>

    div{height: 500px;width: auto;
        background-color: black;
        overflow: auto;}

    p{width: calc(50);
        border: solid orange;
        column-count: 3;
        font-size: 50px}

    p::first-line{color:#ffffff}
    



    </style>
    <link rel="stylesheet" href="../../img/styles.css">
    <link rel="stylesheet" href="../../img/index.html">
</head>
<body>
    
    
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum, eligendi alias, possimus blanditiis odio provident praesentium aliquid tempore ab sed veritatis necessitatibus maiores? Fugit, unde assumenda reiciendis qui optio doloremque.</p>
    <br>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum eius unde, nulla libero placeat eum mollitia animi quibusdam quod adipisci eveniet perspiciatis, temporibus vitae. Minima optio exercitationem provident ullam repellat!</p>
    <br>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore omnis accusantium dolor accusamus delectus illo nesciunt suscipit porro vitae saepe, minus aperiam ratione explicabo quam magni ducimus quaerat expedita eum?</p>



    
    <div>
        <img src="../../img/f1.jpg" alt="1">
        <img src="../../img/f10.jpg" alt="2">
        <img src="../../img/f2.jpg" alt="3">
        <img src="../../img/f3.jpg" alt="4">
        <img src="../../img/f4.jpg" alt="5">
        <img src="../../img/f5.jpg" alt="6">
        <img src="../../img/f6.jpg" alt="7">
        <img src="../../img/f7.jpg" alt="8">
        <img src="../../img/f8.jpg" alt="9">
        <img src="../../img/f9.jpg" alt="10">
    </div>

    <div>
        <span><img class="1" src="../../img/f1.jpg" alt=""></span>
        <span><img class="1" src="../../img/f10.jpg" alt=""></span>
        <span><img class="1" src="../../img/f10.jpg" alt=""></span>


    </div>



</body>
</html>